<template lang="pug">
  div.table-empty
    s-table(
    v-if="$route.path === '/setting/config/course'"
    ref="table"
    :reqUrl="tableObj.url"
    reqMethod="get"
    :column="tableObj.column"
    :queryPropsParams="{areaId: curArea.areaId}"
    :filterProps="{ showBtns: true, fields: tableObj.filterItems }"
    )
      .table-operator(slot="table-operator")
        el-button.gradientVertical(size="large" round @click="actionHandle({}, 'add')") 新增
      template(slot="status" slot-scope="text, scope")
        el-tag(:type="text ? 'success' : 'warning'" size="mini" class="mr5" effect="plain") {{text === 0 ? '启用' : '禁用'}}
      template(slot="action" slot-scope="text, scope")
        el-link(v-if="scope.status === 0" @click="actionHandle(scope, 'edit')" type="success") 修改
        el-popconfirm(
          :title="scope.status === 0 ? '您确认要禁用该项?' : '您确认要启用该项?'"
          @confirm="() => actionHandle(scope, 'delete')"
          @onConfirm="() => actionHandle(scope, 'delete')"
        )
          el-link(slot="reference" type="danger") {{scope.status === 0 ? '禁用' : '启用'}}
      template(slot="created" slot-scope="text, scope")
        span {{text | dateFilter('YYYY/MM/DD HH:mm')}}
    router-view(v-else)
</template>

<script>
import { mapGetters } from 'vuex'
import { column, seachConfig } from './config'
import { createType, updateType } from './api'
export default {
  data () {
    return {
      tableObj: {
        url: 'web/course/get_area_bulid_coursetype',
        column,
        filterItems: seachConfig
      }
    }
  },
  computed: {
    ...mapGetters(['curArea'])
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },

    actionHandle (row, type) {
      if (type === 'delete') {
        // 启用 禁用
        if (row.status === 0) {
          this.deleteType(row.id, row.typeName, 1)
        } else {
          this.deleteType(row.id, row.typeName, 0)
        }
        return
      }
      if (type === 'add') {
        this.createType()
        return
      }
      if (type === 'edit') {
        this.updateType(row.typeName, row.id)
        return
      }
    },

    deleteType (id, typeName, status) {
      updateType({ id, status, typeName }).then(res => {
        console.log(res)
        this.refreshTable()
      })
    },

    updateType (inputValue, id) {
      const that = this
      this.$prompt('请输入课程分类', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: inputValue
      }).then(({ value }) => {
        updateType({
          status: 0,
          typeName: value,
          id
        }).then(() => {
          that.$message.success('添加分类成功')
          that.refreshTable()
        })
      })
    },

    createType () {
      const that = this
      this.$prompt('请输入课程分类', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        createType({
          status: 0,
          typeName: value,
          type: 2,
          templateType: 3
        }).then(() => {
          that.$message.success('添加分类成功')
          that.refreshTable()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .container{

  }
</style>
